<!DOCTYPE html>
<html class="ui-page-login">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/reg_css/jquery.mobile-1.3.2.min.css">
		<link rel="stylesheet" type="text/css" href="css/reg_css/style.css">
		<link rel="stylesheet" type="text/css" href="css/reg_css/theme.css">
		<style>
			.area {
				margin: 20px auto 0px auto;
			}
			.mui-input-group:first-child {
				margin-top: 20px;
			}
			.mui-input-group label {
				width: 22%;
			}
			.mui-input-row label~input,
			.mui-input-row label~select,
			.mui-input-row label~textarea {
				width: 78%;
			}
			.mui-checkbox input[type=checkbox],
			.mui-radio input[type=radio] {
				top: 6px;
			}
			.mui-content-padded {
				margin-top: 25px;
			}
			.mui-btn {
				padding: 10px;
			}
			
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">注册</h1>
		</header>
		<div data-role="page" data-theme="f">
    <div data-role="header" data-theme="f">
        <a href="index.html" data-ajax="false" class="back" data-role="none" data-direction="reverse"><img src=""></a>
    </div>
    <div data-role="content" >
		<form>
			<div class="line1">
                <span class="user-input"><img src="img/reg_img/name.png"></span>  
                <input type="text" id="nickname" name="nickname" class="user" placeholder="昵称(必填选项)" data-role="none">
            </div>
            <div class="line2">
            	<span class="user-input"><img src="img/reg_img/user.png"></span>  
                <input type="text" id="username" name="username" onkeyup="value=value.replace(/[^\w\.]/ig,'')" placeholder="帐号(必填选项)" data-role="none">
            </div>
            <div class="line3">
            	<span class="user-input"><img src="img/reg_img/lock.png"></span>  
                <input type="password" id="password" name="password" placeholder="密码(必填选项)" data-role="none">
            </div>
            <div class="line4">
            	<span class="user-input"><img src="img/reg_img/lock.png"></span>  
                <input type="password" id="password2" placeholder="确认密码(必填选项)" data-role="none">
            </div>
            <div class="line5">
            	<span class="user-input"><img src="img/reg_img/age.png"></span>  
                <input type="text" id="age" name="age" onkeyup="this.value=this.value.replace(/\D/g,'')" class="lock" placeholder="年龄" data-role="none">
            </div>
            <div class="line6">
            	<span class="user-input"><img src="img/reg_img/iphone.png"></span>  
                <input type="text" id="phone" onkeyup="this.value=this.value.replace(/\D/g,'')" name="phone" class="lock" placeholder="手机(必填选项)" data-role="none">
            </div>
            <div class="line7">
            	<span class="user-input"><img src="img/reg_img/phone.png"></span>  
                <input type="text" name="plane" onkeyup="this.value=this.value.replace(/\D/g,'')" placeholder="座机" data-role="none">
            </div>
            <div class="line8">
            	<span class="user-input"><img src="img/reg_img/mail.png"></span>  
                <input type="text" id="email" onkeyup="this.value=this.value.replace(/[^a-zA-Z0-9_\-@\.]/g,'')" name="email" class="lock" placeholder="邮箱(必填选项)" data-role="none">
            </div>
            <div class="line9">
            	<span class="user-input"><img src="img/reg_img/qq.png"></span>  
                <input type="text" onkeyup="this.value=this.value.replace(/\D/g,'')" name="qq" placeholder="QQ号码" data-role="none">
            </div>
            <div class="line10">
            	<span class="user-input"><img src="img/reg_img/wx.png"></span>  
                <input type="text" name="wechat" onkeyup="value=value.replace(/[^\w\.]/ig,'')" class="lock" placeholder="微信账号" data-role="none">
            </div>
            <div class="line11">
            	<span class="user-input question"><img src="img/reg_img/translate.png"></span>  
            	<select id="security" name="securtyId" style="width: 80%;margin-left: 11%">
					<option value="0" selected="selected">您配偶的名字?</option> 
					<option value="1" >您居住街道的名字?</option>
					<option value="2">您父亲的名字?</option>
            	</select>
            	<input type="text" id="#nickname" name="result" placeholder="请输入答案(必填选项)" data-role="none">
            </div>
            <div class="line12">
            	<span class="user-input"><img src="img/reg_img/gender.png"></span> 
            	<table class="reg-gender">
            		<tr>
            		<td>&nbsp;请选择性别&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
            		<td>
            			<input id="man" type="radio" checked="checked" name="sex" value="0"/>男
            			<input id="woman" type="radio"  name="sex" value="1"/>女
            		</td>
            	</tr>
            	</table>
            	
            </div>
            <div class="chose">
                <a   data-rel="dialog" data-ajax="false"  data-role="none" class="login" >确定</a>
            </div>
		</form>
       </div>
			<div class="mui-content-padded">	
				<p class="size">安全问题为必填选项，为方便日后找回密码</p>
			</div>
		</div>
	
	</body>
	<script src="js/mui.min.js"></script>
	<script src="js/app.js"></script>
	<script type="text/javascript" src="js/zepto.min.js"></script>
	<script type="text/javascript" src="js/util.js"></script>
	<script>
		/*var options = $("#security").find("option:checked");
		console.log(options[0]);*/
		document.body.addEventListener('touchmove', function(event) {	
		    // 判断默认行为是否可以被禁用
		    if (event.cancelable) {
		        // 判断默认行为是否已经被禁用
		        if (!event.defaultPrevented) {
		            event.preventDefault();
		        }
		    }			
		}, false);
		//创建提示操作对象
		var param = {title:'提示',text:'',callback:function(){this.remove();}}
		
		/*$("#security").on('change',function(){
			var options = $("#security option:checked");
			console.log(options);
			console.log(options.val());
		});*/
		//绑定点击事件,注册
		$(".login").on('touchend',function(){
			var nickname = $("#nickname").val();
			var result = $("#result").val();
			var email = $("#email").val();
			var phone = $("#phone").val();
			if(!nickname){
				param.text = "请输入昵称！";
				iAlert(param);
				return;
			}
			if(!result){
				param.text = "请输入安全问题答案！";
				iAlert(param);
				return;
			}
			console.log(checkUsername());
			var flag=isPhoneno(phone)&&isMail(email)&&checkPwd()&&checkUsername();
			console.log(flag);
			if(flag){
				var data = $('form').serialize();
				console.log(data);
				$.ajax({
					"url": "http://192.168.0.105/WBPlatform/user/handle_register.do",
					"data": data,
					"type": "POST", 
					"dataType": "json", 
					"xhrFields": {
	           			withCredentials: true
	       			},
	       			"crossDomain": true,
					"success": function(obj) {
						if(obj.state==1){
							param.text = obj.message;
							iAlert(param);
							location.href="index.html";
						}else{
							param.text = obj.message;
							iAlert(param);
						}
					}
						
				});
			}
		});
		//账号验证
		function checkUsername(){
			var username = $("#username").val();
			if(!username){
				param.text = "请输入账号！";
				iAlert(param);
				return false;
			}else{
				var flag=false;
				$.ajax({
					"url": "http://192.168.0.105/WBPlatform/user/check_username.do",
					"data": "username=" + username,
					"type": "GET", 
					"dataType": "json", 
					"async": false,
					"xhrFields": {
	           			withCredentials: true
	       			},
	       			"crossDomain": true,
					"success": function(obj) {
						if(obj.state==1){
							console.log(obj.message);
							flag = true;
						}else{
							param.text = obj.message;
							iAlert(param);						}
					}
						
				});
				return flag;
			}
		};
		//验证密码是否一致
		function checkPwd(){
			var pwd = $("#password").val();
			var pwd2 = $("#password2").val();
			if(pwd && pwd == pwd2){
				return true;
			}
			param.text = "两次输入的密码不一致！";
			iAlert(param);
			return false;
		}
		//验证是否是邮箱
		function isMail(str){
			var reg = /^[A-Za-z0-9]+@[a-zA-Z0-9_\-]+(\.[a-zA-Z0-9_\-]+)+$/;
			if(reg.test(str)){
				return true;
			}
			param.text = "请输入正确的邮箱！";
			iAlert(param);
			return false;
		} 
		//验证是否是电话
		function isPhoneno(str){
			var reg=/[^0-9]/g;
		  	var len=str.length;
		  	console.log(str);
		  	if (len!=11){
		  		param.text = "您输入的手机号码位数不正确！";
				iAlert(param);
		  		return false;
		  	}
		  	if (reg.test(str)){
			  	param.text = "手机号码必须是数字！";
				iAlert(param);
			  	return false;
			}else{
		  		return true;
		  	}
		};
	</script>
</html>